<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="翼遥bingo">
    <title>希声_music</title>
    <!-- favicon图标 -->
    <link rel="shortcut icon" href="xisheng.ico">

    <!-- 样式表文件 -->
    <link rel="stylesheet" href="./css/player.css">

    <!-- jQuery文件 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    <script src="lib/jQuery.js"></script>

    <!-- layer：强大的弹窗库引入 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script> -->
    <script src="lib/3.1.1/layer.js"></script>
</head>

<body>
    <!-- 注意 : 注释代码均为需要动态生成的结构 -->
    <!-- 头部导航 +登录 -->
    <header>
        <div class="center">
            <img src="./images/logo.png" alt="">
            <ul class="clear-fix">
                <li class="active" data-action='home'><a href="javascript:void(0);">首页</a></li>
                <li data-action='my'><a href="javascript:void(0);">我的音乐</a></li>
                <li data-action='playlistItem'><a href="javascript:void(0);">歌单</a></li>
            </ul>
            <span>
                      <input class="search" type="text" placeholder="请输入歌手、歌名或专辑">
                      <svg t="1643274718150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1103" width="35" height="35"><path d="M398.9 735.5c-185.4 0-336.3-150.9-336.3-336.3C62.7 213.9 213.5 63 398.9 63s336.2 150.9 336.2 336.2c0.1 185.4-150.8 336.3-336.2 336.3m0-597.8c-144.2 0-261.5 117.3-261.5 261.5s117.4 261.5 261.5 261.5c144.2 0 261.5-117.3 261.5-261.5 0.1-144.2-117.3-261.5-261.5-261.5" fill="#C6CCDA" p-id="1104"></path><path d="M865.9 959.6c-23.9 0-47.8-9.1-66-27.3L540.3 672.6c-14.6-14.6-14.6-38.3 0-52.8 14.6-14.6 38.2-14.6 52.8 0l259.6 259.7c7.4 7.4 19 7.4 26.4 0 3.7-3.7 5.5-8.1 5.5-13.2s-1.9-9.5-5.5-13.2L717.9 691.8c-14.6-14.6-14.6-38.2 0-52.8 14.6-14.6 38.2-14.6 52.8 0l161.2 161.2c17.7 17.7 27.4 41.1 27.4 66s-9.7 48.3-27.4 66c-18.2 18.2-42.1 27.4-66 27.4M249.5 436.6c-20.6 0-37.3-16.7-37.3-37.4 0-103 83.8-186.8 186.8-186.8 20.6 0 37.3 16.7 37.3 37.4 0 20.6-16.7 37.3-37.3 37.3-61.8 0-112.1 50.3-112.1 112.1 0 20.6-16.8 37.4-37.4 37.4" fill="#C6CCDA" p-id="1105"></path></svg>
                    </span>

            <span id="user-login">
                <!-- <a id="loginClick" href="javascript:void(0);">登录</a> -->
                <!-- <img src="" alt="" id="user-awatar">
                        <span id="user-name">翼遥bingo</span> -->

            </span>
            <div id="loginout">
                <p class="loginOut">退出登录</p>
                <p>。。。</p>
            </div>

        </div>
    </header>

    <div class="container">
        <!-- 轮播图区域 -->
        <div class="center1">
            <section class="banner">

            </section>
        </div>
        <!-- 热门推荐 -->
        <div class="center1">
            <section class="hotList">
                <div class="h-title">
                    <h1>热门推荐</h1>
                    <!-- <span class="h-subt active1">为你推荐</span>
                    <span class="h-subt">华语</span>
                    <span class="h-subt">流行</span>
                    <span class="h-subt">摇滚</span>
                    <span class="h-subt">摇滚</span>
                    <span class="h-subt">摇滚</span> -->
                </div>
                <div id="playlist">
                    <!-- <div class="listItem">
                        <div class="itemUp">
                            <img src="" alt="" id="image">
                            <span>
                                <svg t="1643723774107" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1990" width="20" height="20"><path d="M510.257 178.266c-139.235 0-252.1 110.566-252.1 246.948 0 136.379 112.865 246.945 252.1 246.945 139.232 0 252.096-110.566 252.096-246.945-0.055-136.382-112.864-246.948-252.096-246.948zM219.136 520.049V292.027c-3.191 0-6.381 0.11-9.462 0.389C261.348 180.222 376.395 102.07 510.257 102.07c133.859 0 248.96 78.152 300.578 190.346-3.135-0.222-6.27-0.39-9.46-0.39V520.05c64.27 0 116.448-51.059 116.448-113.984 0-42.772-24.072-80.001-59.622-99.542C808.149 165.387 671.49 64.055 510.257 64.055c-161.236 0-297.84 101.332-347.948 242.468-35.55 19.485-59.623 56.77-59.623 99.486 0 62.981 52.123 114.04 116.45 114.04z m542.658 130.723c-65.893 60.242-154.292 97.133-251.536 97.133-97.077 0-185.365-36.724-251.203-96.795C141.26 710.454 63.89 816.207 63.89 959.808h895.753c0-143.879-78.771-249.746-197.85-309.036z m0 0" p-id="1991" fill="#1296db"></path></svg>
                                <em></em>
                            </span>
                        </div>
                        <div class="info">
                            <div class="infoName"></div>
                            <div class="infoTag"></div>
                        </div>
                    </div> -->
                </div>
            </section>
        </div>
    </div>
    <!-- 登录弹窗展示的内容 -->
    <div id="login-page" hidden>
        请输入手机号： <input id="loginInput1" type="text" placeholder="请输入电话号码">
        <br> 请输入密码：　 <input id="loginInput2" type="password" placeholder="请输入密码">
    </div>

    <!-- "我的音乐" 模块 -->
    <div id="my" hidden>

    </div>
    <!-- 歌单模块 -->
    <div id="playlistItem" class="clear-fix">
        <div class="ItemLeft">
            <div class="LeftTop">
                <!-- <img class="ItemAva" src="" alt="">
                <div class="describe">
                    <h3>香港乐坛女子图鉴（12222-1222）</h3>
                    <p class="p1"><img src="" alt="" class="avatar"><span>fdsfasdfasf</span><i>2021-05-21</i></p>
                    <p class="p2">
                        <svg t="1643819098263" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2188" width="15" height="15"><path d="M-2.048 714.752q0-50.176 13.312-87.04t48.128-69.632l0 313.344q-35.84-31.744-48.64-68.608t-12.8-88.064zM957.44 558.08q30.72 23.552 49.664 65.024t18.944 91.648q0 51.2-14.848 87.552t-53.76 69.12l0-313.344zM835.584 512q19.456 0 38.912 15.36t19.456 43.008l0 265.216q0 12.288-5.632 23.04t-13.824 19.456-18.944 13.312-19.968 4.608l-71.68 0q-26.624 0-44.544-16.384t-17.92-44.032l0-265.216q0-27.648 19.968-43.008t42.496-15.36l71.68 0zM249.856 512q29.696 0 48.128 14.336t18.432 45.056l0 258.048q0 30.72-15.872 48.128t-41.472 17.408l-74.752 0q-30.72 0-45.568-18.432t-14.848-45.056l0-260.096q0-30.72 18.432-45.056t44.032-14.336l63.488 0zM509.952 62.464q80.896 0 152.576 27.648t125.44 78.336 84.48 121.344 30.72 155.648l-67.584 0q-25.6 0-46.08 0.512t-20.48-0.512q0-63.488-21.504-112.128t-56.832-81.408-81.92-49.152-98.816-16.384q-51.2 0-97.28 21.504t-81.408 57.856-56.832 82.944-21.504 96.768l-135.168 0q0-84.992 30.72-155.648t83.968-121.344 124.928-78.336 152.576-27.648z" p-id="2189" fill="#dbdbdb"></path></svg>
                        <em>338.5万次</em>
                        <svg t="1643819233739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3097" width="15" height="15"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="3098" fill="#dbdbdb"></path></svg>
                        <em>389</em>
                        <svg t="1643853346854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4017" width="15" height="15"><path d="M960.167183 449.688839c0-17.253966-13.980409-31.233352-31.234375-31.233352S897.699456 432.434873 897.699456 449.688839c0 177.968297-172.802648 322.749752-385.217479 322.749752-0.548492 0-1.059122 0.13303-1.600451 0.161682-6.865361-0.231267-13.842263 1.647523-19.761066 6.081509L374.512672 866.139669l0-83.289961c0-1.542122-0.237407-3.018753-0.453325-4.499477 2.406816-14.398942-5.573949-28.961612-19.739577-34.328853-137.929396-52.209082-227.055273-167.739329-227.055273-294.332539 0-17.253966-13.980409-31.233352-31.233352-31.233352s-31.233352 13.980409-31.233352 31.233352c0 146.375765 96.360651 279.546787 247.248174 344.541057l0 134.378523c0 11.834536 6.680143 22.642696 17.264199 27.939329 4.422729 2.206248 9.201569 3.294023 13.970176 3.294023 6.628978 0 13.227256-2.115174 18.738783-6.243191l158.490687-118.868271C763.656577 831.018777 960.167183 659.787928 960.167183 449.688839z" p-id="4018" fill="#dbdbdb"></path><path d="M103.473653 374.938368c16.186657 5.876847 34.121122-2.53166 39.987736-18.758226 48.802496-134.971018 200.438055-229.241055 368.766808-229.241055 169.051207 0 320.879148 94.789876 369.224226 230.501768 4.554736 12.780071 16.582677 20.761859 29.424146 20.761859 3.477194 0 7.015787-0.589424 10.482749-1.819438 16.247033-5.78475 24.727171-23.658839 18.941398-39.906895C882.347816 173.778882 710.317765 64.47136 512.228197 64.47136c-197.224874 0-369.021611 108.698654-427.513794 270.480294C78.848813 351.167988 87.246063 369.071753 103.473653 374.938368z" p-id="4019" fill="#dbdbdb"></path><path d="M390.596999 300.54503c-17.253966 0-31.233352 13.980409-31.233352 31.233352l0 30.470989c0 17.253966 13.980409 31.233352 31.233352 31.233352s31.234375-13.980409 31.234375-31.233352l0-30.470989C421.830351 314.524416 407.850965 300.54503 390.596999 300.54503z" p-id="4020" fill="#dbdbdb"></path><path d="M634.366955 300.54503c-17.253966 0-31.234375 13.980409-31.234375 31.233352l0 30.470989c0 17.253966 13.980409 31.233352 31.234375 31.233352s31.233352-13.980409 31.233352-31.233352l0-30.470989C665.60133 314.524416 651.620921 300.54503 634.366955 300.54503z" p-id="4021" fill="#dbdbdb"></path><path d="M589.507258 441.99153c-14.305821-9.405207-33.593096-5.38873-43.159986 8.764618-0.132006 0.193405-13.614066 19.754926-34.172287 19.754926-19.989263 0-32.423457-18.098193-33.267685-19.36914-9.160637-14.417361-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.367071-10.055007 43.017746 11.214413 18.047028 41.970904 48.589648 86.157265 48.589648 43.963281 0 75.105558-30.318516 86.574774-48.223305C607.970772 470.358601 603.78238 451.396737 589.507258 441.99153z" p-id="4022" fill="#dbdbdb"></path></svg>
                        <em>389</em>
                    </p>
                    <h5>歌曲简介</h5>
                    <p class="p3">u耳朵和阿USB房贷首付急急急急急急急deihosf宏观结构本土给他刚开始附件里是空军飞机我真的不知道为什么有真TNfjskdfhsdjfbdsfubsdasd从事地产 dfbsdfshbfskfsjkfskskfsdfsdfsdfsdfsdfsfsdfsfsdf急急是对付你的时间浪费你说的家乐福不是大佬双方家里是对方年龄可适当诺夫斯克得瑟得瑟吉森发顺丰呢的身份无非就忘记哦
                    </p>
                </div> -->
            </div>
            <div class="LeftDown">
                <p class="downtitle">
                    <span>歌曲列表</span>
                    <em>50首歌</em>
                    <button><svg t="1643819098263" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2188" width="15" height="15"><path d="M-2.048 714.752q0-50.176 13.312-87.04t48.128-69.632l0 313.344q-35.84-31.744-48.64-68.608t-12.8-88.064zM957.44 558.08q30.72 23.552 49.664 65.024t18.944 91.648q0 51.2-14.848 87.552t-53.76 69.12l0-313.344zM835.584 512q19.456 0 38.912 15.36t19.456 43.008l0 265.216q0 12.288-5.632 23.04t-13.824 19.456-18.944 13.312-19.968 4.608l-71.68 0q-26.624 0-44.544-16.384t-17.92-44.032l0-265.216q0-27.648 19.968-43.008t42.496-15.36l71.68 0zM249.856 512q29.696 0 48.128 14.336t18.432 45.056l0 258.048q0 30.72-15.872 48.128t-41.472 17.408l-74.752 0q-30.72 0-45.568-18.432t-14.848-45.056l0-260.096q0-30.72 18.432-45.056t44.032-14.336l63.488 0zM509.952 62.464q80.896 0 152.576 27.648t125.44 78.336 84.48 121.344 30.72 155.648l-67.584 0q-25.6 0-46.08 0.512t-20.48-0.512q0-63.488-21.504-112.128t-56.832-81.408-81.92-49.152-98.816-16.384q-51.2 0-97.28 21.504t-81.408 57.856-56.832 82.944-21.504 96.768l-135.168 0q0-84.992 30.72-155.648t83.968-121.344 124.928-78.336 152.576-27.648z" p-id="2189" fill="#dbdbdb"></path></svg>
                        播放全部</button>
                    <button><svg t="1643819233739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3097" width="15" height="15"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="3098" fill="#dbdbdb"></path></svg>
                        收藏</button>
                </p>
            </div>
            <div class="SongItem">
                <table>
                    <tr>
                        <th>序号</th>
                        <th>歌曲</th>
                        <th>歌手</th>
                        <th>专辑</th>
                    </tr>
                    <!-- <tr>
                        <td>1</td>
                        <td><svg t="1643891592840" class="playIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2300" width="30" height="30"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" p-id="2301"></path></svg></td>
                        <td>11</td>
                        <td>队长/黄格利</td>
                        <td>111</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>11</td>
                        <td>队长/黄格利</td>
                        <td>111</td>
                    </tr> -->
                </table>
            </div>
        </div>
        <div class="ItemRight">
            <h3 class="rightTitle1">歌曲评论</h3>
            <!-- <div class="commentItem">
                <img src="" alt="" class="c_avatar">
                <div class='c_p'>
                    <h5 class="c_name"></h5>
                    <p class="c_content"></p>
                </div>
            </div> -->
        </div>
    </div>
    <!-- audio底部区域 -->
    <div class="footer">
        <div class="contain">
            <audio controls preload loop autoplay style="width:90%;">
                <source src="">
                您的浏览器不支持 audio 元素。
            </audio>
            <!-- <div class="con-btn">
                <a href="javascript:;" class="player-btn btn-prev" title="上一首">
                </a>
                <a href="javascript:;" class="player-btn btn-play" title="暂停/继续">
                </a>
                <a href="javascript:;" class="player-btn btn-next" title="下一首">
                </a>
                <a href="javascript:;" class="player-btn btn-order" title="循环控制">
                </a>
            </div>
            <div class="vol">
                <div class="quiet">
                    <a href="javascript:;" class="player-btn btn-quiet" title="静音"></a>
                </div>
                <div class="volume">
                    <div class="volume-box">
                        <div id="volume-progress" class="xsN-area"></div>
                    </div>
                </div>
            </div>

            <div class="progress">
                <div class="progress-box">
                    <div id="music-progress" class="xsN-area"></div>
                </div>
            </div>
            <div id="music-info" title="点击查看歌曲信息"></div> -->
            <div class="lyric">
                <ul id="lyric"></ul>
            </div>
            <span style="vertical-align: top;"><button style="font-size: 24px;border-radius: 10px;">查看歌词</button></span>
        </div>

    </div>
    <!-- 获取后端数据模块 -->
    <script src="./js/api.js"></script>

    <!-- 主题功能模块 -->
    <script src="./js/function.js"></script>

    <!-- 播放器歌词解析模块 -->
    <script src="js/lyric.js"></script>

    <!-- 播放器主体功能模块 -->
    <script src="js/player.js"></script>

</body>

</html>